<template>
  <div class="content">
    <div class="content-left">
      <div class="content-left-item first">
        <LeftTop/>
      </div>
      <div class="content-left-item">
        <leftCenter/>
      </div>
      <div class="content-left-item">
        <leftBottom/>
      </div>
    </div>
    <div class="content-middle">
      <div class="middle-top"></div>
      <div class="middle-bottom">
        <div class="middle-bottom-item first">
          <centerBottomLeft/>
        </div>
        <div class="middle-bottom-item"></div>
      </div>
    </div>
    <div class="content-right">
      <div class="content-left-item first">
        <rightTop/>
      </div>
      <div class="content-left-item">
        <rightCenter :title="'预 警 信 息'"/>
      </div>
      <div class="content-left-item">
        <rightCenter :title="'报 警 信 息'"/>
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
  import LeftTop from './components/leftTop.vue'
  import leftCenter from './components/leftCenter.vue'
  import leftBottom from './components/leftBottom.vue'
  import centerBottomLeft from './components/centerBottomLeft.vue'
  import rightTop from './components/rightTop.vue'
  import rightCenter from './components/rightCenter.vue'
  
 </script>
<style lang='scss' scoped>
.content {
  display: flex;
  justify-content: space-between;
  color: #fff;
  height: calc(100% - 90px);
  .content-left {
    width: 24%;
    height: auto;
  }
  .content-left-item {
    width: 100%;
    height: 32%;
    background-image: url("../../assets/images/u34.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 13px;
  }
  .first {
    margin-top: 0;
  }
  .content-middle {
    width: 51.2%;
    height: auto;
    .middle-top {
      width: 100%;
      height: 66.5%;
      background-image: url("../../assets/images/u34.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .middle-bottom {
      width: 100%;
      height: 32%;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .middle-bottom-item {
        background-image: url("../../assets/images/u34.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        flex: 1;
        height: 100%;
      }
      .first {
        margin-right: 10px;
      }
    }
  }
  .content-right {
    width: 24%;
    height: auto;
   
  }
}
</style>
